import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import Tooltip from '@kuiper-components/tooltip';
import s from './style.module.css';

function Progress({ className, percent, fillColor, status }) {
	return (
		<Tooltip overlay={percent} placement="top">
			<div className={cn(className, s.progress, s[status])}>
				<div
					className={s.bar}
					style={{ width: percent, backgroundColor: fillColor }}
				/>
			</div>
		</Tooltip>
	);
}

Progress.propTypes = {
	className: PropTypes.string,
	percent: PropTypes.string.isRequired,
	fillColor: PropTypes.string,
	status: PropTypes.string,
};
Progress.defaultProps = {
	className: s.progress,
};

export default Progress;
